<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html5/loose.dtd">

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
</head>
<body>

<!-- 按名称查询和全部查询 按钮 -->
	<div class="ui attached segment">

      <!-- 按名称查询 按钮 -->
		<form action="/index" method="post" style="display:inline-block">
			<input type="text" name="name" placeholder="请输入名称查找"  /> <input
				type="submit" value="搜索" />
		</form>
		
      <!-- 全部查询 按钮 -->
		<form action="/index" method="get" style="display:inline-block">
			<input type="submit" value="搜索全部"  />
		</form>
		
		<a  href="" class="ui button mini teal" style="margin-left:30px !important ">新增</a>

	</div>
	
<!--用户数据展示-->
	<div class="ui contanier">
		<table class="ui celled table" style="margin-top: 40px !important;">
			<!-- 表格的表头  -->
			<thead>
				<tr>
					<th>id</th>
					<th>名称</th>
					<th>用户名</th>
					<th>密码</th>
					<th>操作</th>
				</tr>
			</thead>

			<!-- 查询用户数据 并展示在表格体内 -->
			<tbody>
			
				<!-- th:each是循环标签 相当于一个for循环，再通过 th:text标签显示出每个内容-->
				<tr th:each="user:${page.list}">
					<td th:text="${user.id}"></td>
					<td th:text="${user.name}"></td>
					<td th:text="${user.username}"></td>
					<td th:text="${user.password}"></td>

					<!-- 编辑和删除 按钮 -->
					<td>
					<a href="" class="ui button mini pink">编辑</a> 
					<a th:href="@{/deleteById/(id=${user.id})}"
						class="ui button mini teal">删除</a> 
					</td>
				</tr>

			</tbody>
			
		</table>
		</div>
<!-- 分页功能 -->
<div class=" ui attached segment">
			<table calss="m-mobile-wide" width="425px">
				<tbody>
					<tr align="center">

						<!-- 分页展示的 上一页 按钮 -->
						<td><a class="ui button basic mini"
							th:unless="${!page.isFirstPage}">上一页</a> <!--@{/index/(pageNum=${page.pageNum-1})}  使用href超链接 重定向页面，后面的/()里面传递参数值 -->

							<a th:href="@{/index/(pageNum=${page.pageNum-1})}"
							class="ui button basic mini" th:unless="${page.isFirstPage}">上一页</a>
						</td>

						<!-- 分页展示中的  数据展示 -->
						<td>第&nbsp;<h8 th:text="${page.pageNum}"></h8>&nbsp;页&nbsp;|&nbsp;

							共&nbsp;<h8 th:text="${page.pages}"></h8>&nbsp;页&nbsp;|&nbsp;

							共&nbsp;<h8 th:text="${page.total}"></h8>&nbsp;条
						</td>

						<!-- 分页展示的 下一页 按钮 -->
						<td style="float: right"><a
							th:href="@{/index/(pageNum=${page.pageNum+1})}"
							class="ui button basic mini" style="float: right;"
							th:unless="${page.isLastPage}">下一页</a> <a
							class="ui button basic mini" style="float: right;"
							th:unless="${!page.isLastPage}">下一页</a></td>

						<!-- 分页展示的 输入框和跳转 按钮 -->
						<td>
							<form name="pageForm" th:action="@{/index/}" method="get">
								<div class="ui mini input">
									<input type="text" class="m-bg" name="pageNum" placeholder="页码"
										style="width: 50px !important; height: 27.76px !important;"
										required>
									<button type="submit"
										style="font-size: 11px !important; width: 30px !important; height: 0px !important; border: none; margin: 5px; padding: 0;"
										class="button mini">跳转</button>
								</div>
							</form>
						</td>

					</tr>
				</tbody>
			</table>
	</div>
	
	<!-- 提示语： -->
	<div class="ui success message" th:unless="${#strings.isEmpty(message)}">    <!-- 当传给页面的参数message不为空时，这个div才会显示 -->
	<i class="close icon"></i>       <!-- 关闭图标按钮 X -->
	<div class="hesder">提示:</div>
	<p th:text="${message}"></p>
	</div>


	<!-- 引入外部的script脚本  联网使用 -->
	<script crossorigin="anonymous"
		integrity="sha512-WNLxfP/8cVYL9sj8Jnp6et0BkubLP31jhTG9vhL/F5uEZmg5wEzKoXp1kJslzPQWwPT1eyMiSxlKCgzHLOTOTQ=="
		src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>
	<script
		src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

	<!--  关闭弹窗脚本 -->
	<script>
		$(".message .close").on('click',function () {
			$(this).closest(".message")
			    .transition("fade");
		})
	</script>
</body>
</html>




















